<template>
	<view>
		<view class="cell" :style="{padding:padd}">
			<view :class="[border ? 'border-bottom' : '']" @tap="$emit('click')">
				<view class="cell-dis">
					<view class="cell-left">
						<view class="cell-view" :style="{width:leftwidth+'rpx'}">
							<image class="leftIcon" :src="imgUrl+icon" v-if="leftIcon"></image>
							<text v-if="leftfont" class="size28 priceTeColor">{{leftfont}}</text>
							<slot name="t"></slot>
						</view>
						<text :class="['size28 oneover text-left',textF ? 'gro-no' : '']" v-if="text" :style="{color:Color,width:leftMax ? '500rpx' : '300rpx'}">{{text}}</text>
						<slot name="ca"></slot>
					</view>
					<view class="">
						<slot name="right"></slot>
						<slot name="rightIcon"></slot>
					</view>
				</view>
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			textF:{
				type:Boolean,
				default:false
			},
			//图片地址
			icon:{
				type:String,
				default:''
			},
			//左侧主体文字
			text:{
				type:String,
				default:''
			},
			//右侧图标是否显示
			rightIcon:{
				type:Boolean,
				default:true
			},
			//是否显示下划线
			border:{
				type:Boolean,
				default:true
			},
			//左侧宽度
			leftwidth:{
				type:Number,
				default:53
			},
			//左侧图标是否显示
			leftIcon:{
				type:Boolean,
				default:true
			},
			leftMax:{
				type:Boolean,
				default:false
			},
			//左侧文字
			leftfont:{
				type:String,
				default:''
			},
			//右侧图标,必须是icon
			righturl:{
				type:String,
				default:''
			},
			Color:{
				type:String,
				default:'#333333'
			},
			padd:{
				type:String,
				default:'30rpx 24rpx'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.gro-no{
		color:#888888 !important;
	}
	.cell{
		// padding: 30upx 24upx;
		box-sizing: border-box;
	}
	.cell-dis{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cell-left{
		display: flex;
		align-items: center;
	}
	.text-left{
		width:500upx;
	}
	.cell-view{
		width: 53upx;
		// height: 40upx;
		display: flex;
		align-items: center;
		.leftIcon{
			width: 40upx;
			height: 40upx;
		}
	}
</style>
